<template>
  <div class="year-list">
    <el-row :gutter="20">
      <el-col :span="3">
        <div class="left">
          <div v-for="item in navArr" :key="item.id">
            <div
              class="navItem"
              :class="{ activeClass: currentNav == item.id }"
              :title="`${item.time}年利润表:${item.value}`"
              @click="handleNav(item)"
            >
              {{ item.time }}年利润表:<span style="font-size: 16px">¥</span
              >{{ item.value }}元
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="21">
        <div class="right">
          <div class="header">{{ headerYear }}年利润表</div>
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="总收入" width="120">
              <el-table-column prop="name" label="" width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="date" label="13000" width="120">
              <el-table-column prop="date" label="1级" width="120">
              </el-table-column>
              <el-table-column prop="two" label="2级" width="120">
              </el-table-column>
              <el-table-column prop="three" label="3级" width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="province" label="" width="120">
            </el-table-column>
            <el-table-column prop="city" label="总支出" width="120">
              <el-table-column prop="for" label="" width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="address" label="7650" width="120">
              <el-table-column prop="level" label="1级" width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="level" label="" width="120">
              <el-table-column prop="level2" label="2级" width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="zip" label="" width="120">
              <el-table-column prop="level3" label="3级" width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="zip" label="总利润" width="120">
              <el-table-column prop="city" label="" width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="zip" label="5650" width="120">
              <el-table-column prop="city" label="" width="120">
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ProfitListYear",
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "9000",
          name: "主营业务收入",
          for: "主营业务收入",
          level: "8000",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          name: "营业外收入",
          two: "7000",
          for: "营业外收入",
          level2: "6000",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 2,
          name: "其他收入",
          three: "7000",
          for: "管理费收入",
          level3: "8000",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
      currentNav: null,
      navArr: [
        {
          time: "2019",
          id: 1,
          value: 2333,
        },
        {
          time: "2020",
          id: 2,
          value: 3333,
        },
        {
          time: "2021",
          id: 3,
          value: 2342,
        },
        {
          time: "2022",
          id: 4,
          value: 5557,
        },
        {
          time: "2023",
          id: 5,
          value: 3456,
        },
        {
          time: "2024",
          id: 6,
          value: 3456,
        },
        {
          time: "2025",
          id: 7,
          value: 6578,
        },
      ],
      headerYear: "2019",
    };
  },
  created() {
    this.currentNav = this.navArr[0].id;
  },
  methods: {
    // 点击导航
    handleNav(item) {
      this.headerYear = item.time;
      this.currentNav = item.id;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    },
  },
};
</script>

<style scoped style="less">
.year-list {
  /* display: flex; */
}
.left {
  width: 100%;
  border: 1px solid #e2dbdb;
  height: 100vh;
  overflow: auto;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
}
.activeClass {
  background: #1890ff;
  color: white;
}
.navItem {
  height: 40px;
  width: 100%;
  line-height: 40px;
  text-align: center;
  /* margin-top: 5px; */
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.navItem:hover {
  background: #1890ff;
  color: white;
}
.header {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: 900;
}
</style>